<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 选择框 -->
      <QuestionsChoose @serch="submitHandler" @clear="clearHandler" />

      <!-- tab 栏切换 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tableClickHandler">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="zero"></el-tab-pane>
        <el-tab-pane label="已审核" name="first"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="second"></el-tab-pane>
      </el-tabs>

      <!-- 数据长条  -->
      <el-alert
        :title="alertText"
        type="info"
        class="alert"
        :closable="false"
        show-icon
      ></el-alert>

      <!-- eltable  表格 -->
      <el-table :data="dataList" style="width: 100%; margin-top: 10px">
        <el-table-column label="试题编号" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column label="学科" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录">
          <template slot-scope="scope">
            <span>{{ scope.row.catalogID }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题型" align="center">
          <template slot-scope="scope">
            <span>{{ mapObj[scope.row.questionType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题干" width="180">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间" width="155">
          <template slot-scope="scope">
            <span>{{ formatTime(scope.row.addDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="难度">
          <template slot-scope="scope">
            <span>{{ mapDiffObj[scope.row.difficulty] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入人" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.creator }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span>{{ mapChkObj[scope.row.chkState] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核意见">
          <template slot-scope="scope">
            <span>{{ scope.row.chkRemarks }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核人" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.chkUser }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布状态">
          <template slot-scope="scope">
            <span>{{ getPub(scope.row) }}</span>
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click="handleChange(scope.row.id)"
              type="text"
              size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="checkHandler(scope.row.id)"
              :disabled="scope.row.chkState !== 0"
              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === 1"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              v-if="scope.row.publishState === 0"
              @click="putaway(scope.row.id)"
              >上架</el-button
            >
            <el-button
              type="text"
              size="small"
              v-else
              @click="slotOut(scope.row.id)"
              >下架</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="removeHandler(scope.row.id)"
              :disabled="scope.row.publishState === 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="q.pagesize"
        layout="  prev, pager, next, sizes,jumper"
        :total="total"
        style="margin: 20px 0; float: right"
      >
      </el-pagination>

      <!-- 题目预览弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="questionsDialogVisible"
        width="50%"
      >
        <QuestionsDia
          :questionsId="questionsId"
          v-if="questionsDialogVisible"
          @success="success"
          :mapObj="mapObj"
          :mapDiffObj="mapDiffObj"
        ></QuestionsDia>
      </el-dialog>

      <!-- 题目审核弹出框 -->
      <el-dialog
        title="题目审核"
        :visible.sync="checkDialogVisible"
        width="30%"
        @closed="closed"
      >
        <div style="margin-bottom: 25px">
          <el-radio v-model="chkState" label="1">通过</el-radio>
          <el-radio v-model="chkState" label="2">拒绝</el-radio>
        </div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入审核意见"
          v-model="chkRemarks"
        >
        </el-input>
        <div style="margin-top: 50px; text-align: right">
          <el-button @click="checkDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="checkChangeHandler">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { questionType, difficulty, publishType } from '@/api/hmmm/constants'
import QuestionsChoose from '../components/questions-choose.vue'
import {
  choice,
  remove,
  choiceCheck,
  choicePublish
} from '@/api/hmmm/questions'
import QuestionsDia from '../components/questions-preview.vue'

export default {
  components: { QuestionsChoose, QuestionsDia },
  created () {
    this.getList()
    this.getMap()
    this.getDiffMap()
    this.getPublishTypeMap()
  },
  data () {
    return {
      q: {
        page: 1,
        pagesize: 5
      },
      payload: {
        page: 1,
        pagesize: 5
      },
      checkDialogVisible: false,
      chkState: '1',
      chkRemarks: '',
      questionsDialogVisible: false,
      questionsId: '',
      formInline: {},
      activeName: 'all',
      alertText: '',
      total: 0,
      dataList: [],
      mapObj: {},
      mapDiffObj: {},
      mapPublishObj: {},
      mapChkObj: {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      },
      questionForm: {},
      newForm: {}
    }
  },
  methods: {
    getMap () {
      questionType.forEach((item) => {
        this.mapObj[item.value] = item.label
      })
    },
    getDiffMap () {
      difficulty.forEach((item) => {
        this.mapDiffObj[item.value] = item.label
      })
    },
    getPublishTypeMap () {
      publishType.forEach((item) => {
        this.mapPublishObj[item.value] = item.label
      })
    },
    // 格式化时间
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    async getList () {
      if (this.activeName === 'all') {
        this.payload = { ...this.q }
      } else if (this.activeName === 'zero') {
        this.payload = { ...this.q, chkState: 0 }
      } else if (this.activeName === 'first') {
        this.payload = { ...this.q, chkState: 1 }
      } else {
        this.payload = { ...this.q, chkState: 2 }
      }
      const res = await choice({ ...this.payload, ...this.questionForm })
      if (res.status !== 200) return
      this.dataList = res.data.items

      this.total = res.data.counts
      this.alertText = `数据一共${res.data.counts}条`
    },
    getPub (row) {
      if (row.chkState === 1 && row.publishState === 1) {
        return '已发布'
      } else if (row.chkState === 1 && row.publishState === 0) {
        return '已下架'
      } else {
        return '待发布'
      }
    },

    // 分页
    handleCurrentChange (val) {
      this.q.page = val
      this.getList()
    },
    handleSizeChange (val) {
      this.q.pagesize = val
      this.getList()
    },
    // tab 栏切换
    async tableClickHandler (el) {
      this.q.page = 1
      if (el.name === 'all') {
        this.payload = this.q
      } else if (el.name === 'zero') {
        this.payload = { ...this.q, chkState: 0 }
      } else if (el.name === 'first') {
        this.payload = { ...this.q, chkState: 1 }
      } else {
        this.payload = { ...this.q, chkState: 2 }
      }
      this.getList()
    },
    // 搜索按钮
    async submitHandler (questionForm, newForm) {
      this.questionForm = questionForm
      this.newForm = newForm
      this.q.page = 1
      if (this.activeName === 'all') {
        this.payload = { ...this.q }
        this.getList()
      } else if (this.activeName === 'zero') {
        this.payload = { ...this.q, chkState: 0 }
        this.getList()
      } else if (this.activeName === 'first') {
        this.payload = { ...this.q, chkState: 1 }
        this.getList()
      } else {
        this.payload = { ...this.q, chkState: 2 }
        this.getList()
      }
    },
    // 清除按钮
    clearHandler (questionForm) {
      this.questionForm = questionForm
    },
    // 关闭对话框
    success () {
      this.questionsDialogVisible = false
    },
    // 5个操作
    handleChange (id) {
      this.questionsDialogVisible = true
      this.questionsId = id
    },
    checkHandler (id) {
      this.checkDialogVisible = true
      this.questionsId = id
    },
    // 上架函数
    async putaway (id) {
      const result = await this.$confirm('您确认上架这道题目吗？', '提示', {
        type: 'warning'
      }).catch((e) => e)
      if (result !== 'confirm') return
      await choicePublish({
        id: id,
        publishState: 1
      })
      this.getList()
    },
    // 下架函数
    async slotOut (id) {
      const result = await this.$confirm('您确认下架这道题目吗？', '提示', {
        type: 'warning'
      }).catch((e) => e)
      if (result !== 'confirm') return
      await choicePublish({
        id: id,
        publishState: 0
      })
      this.getList()
    },
    async removeHandler (id) {
      console.log(id)
      const res = await this.$confirm(
        '此操作将永久删除该题目，是否继续？',
        '提示',
        {
          type: 'warning'
        }
      ).catch((e) => e)
      if (res !== 'confirm') return
      const resu = await remove({ id: id })
      if (resu.status !== 200) return
      this.$message.success({
        showClose: true,
        message: '删除成功'
      })
      if (this.dataList.length === 1 && this.q.page > 1) {
        this.q.page--
      }
      this.getList()
    },
    // 题目审核对话框
    closed () {
      this.chkState = '1'
      this.chkRemarks = ''
    },
    async checkChangeHandler () {
      const res = await choiceCheck({
        id: this.questionsId,
        chkState: Number(this.chkState),
        chkRemarks: this.chkRemarks
      })
      if (res.status !== 200) return
      this.checkDialogVisible = false
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px 10px;
  .choose {
    .box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .leftWord {
        font-size: 12px;
        color: pink;
      }
    }
  }
}
</style>
